<template>
  <view style="padding-bottom: 160rpx;">
    <u-navbar
      v-if="!$isWeixin()"
      :title="title"
      :titleWidth="450"
      :titleBold="true"
      :background="{ backgroundColor: '#ffffff' }"
      :is-fixed="true"
    ></u-navbar>

    <view class="" style="background-color: #FFFFFF; ">
      <u-section style="padding: 20rpx;" title="收货信息" :right="false"></u-section>
      <view class="address u-p-l-20 u-p-b-20">
        <view class="right" style="line-height: 42rpx;">
          <text>申请人: {{ info.ApplayName }}</text>
		  <div class="u-flex">
			  <text>收件人: {{ info.Coll_Array.Customer_Name }}</text>
			  <text class="u-m-l-30" style="color:#999"> {{ info.Coll_Array.Customer_Phone }}</text>
			</div>
          <text>收货地址: {{ info.Collect }}</text>
        </view>
      </view>
    </view>

    <view v-if="info.PayQuota == 1" class="u-m-t-20" style="background-color: #FFFFFF; ">
      <u-section style="padding: 20rpx;" title="申请信息" :right="false"></u-section>
      <u-cell-group>
        <u-cell-item :arrow="false" label="申请部门">{{ info.ApplayType }}</u-cell-item>
        <u-cell-item :arrow="false" label="申请分支">{{ info.ApplayBranch }}</u-cell-item>
        <u-cell-item :arrow="false" label="申请对象">{{ info.ApplayTypeName }}</u-cell-item>
        <u-cell-item :arrow="false" label="订单类型">{{ info.OrderType }}</u-cell-item>
      </u-cell-group>
    </view>

    <view class="order-detail-list u-m-t-20">
      <u-section style="padding: 20rpx;padding-bottom: 0;" title="订单信息" :right="false"></u-section>
      <view class="detail-item u-p-t-10" v-for="(item, index) in info.OrderDetailList" :key="index">
        <text class="">订单号: {{ info.OrderNo }}</text>

        <view class="detail-content u-m-t-10">
          <u-image :width="200" :height="240" :src="$getImageUrl(item.PhotoUrl)"></u-image>

          <view class="u-flex-1 u-flex-col u-col-top u-m-l-30 ">
            <text>{{ item.Name }}</text>
            <text>{{ item.SkuName }} x {{ item.Num }}</text>
            <view class="">
              <text style="color: #f03e3e; font-size: 36rpx; font-weight: bold;margin-right: 6px;">{{ item.Price }}</text>
              积分
            </view>
            <text>{{ item.ShowZeroTitle }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="u-m-t-20 u-p-30" style="background-color: #FFFFFF;">
		<view class="u-flex">
				<text>申请备注：</text>
				<view style="color: #666;">{{ info.PayVoucherRemark }}</view>
		</view>
      <view class="u-flex u-row-between u-m-t-10">
        <text>商品总价</text>
        <text>{{ info.Total }}&nbsp;积分</text>
      </view>
      <view class="u-flex u-row-between u-m-t-10">
        <text>运费</text>
        <text>{{ info.Postage }}&nbsp;积分</text>
      </view>

      <view class="u-flex u-row-between u-m-t-10">
        <text>合计</text>
        <view>
          <text style="color: #f03e3e; font-size: 32rpx;margin-right: 4px;">{{ info.Payment }}</text>
          积分
        </view>
      </view>

      <view class="u-flex u-row-between u-m-t-10">
        <text>折算金额</text>
        <view>
          <text style="color: #f03e3e; font-size: 32rpx;margin-right: 4px;">{{ info.TotalRMB }}</text>
          元
        </view>
      </view>
    </view>

    <u-cell-group class="u-m-t-20" v-if="info.Is_Last_Audit">
      <u-cell-item title="物流承运商" :arrow="false">
        <u-radio-group disabled v-model="info.Logistics_Remark">
          <view class="grid-2">
            <u-radio name="顺丰速运">顺丰速运</u-radio>
            <u-radio name="京东物流">京东物流</u-radio>
            <u-radio name="亚泰盛通">亚泰盛通</u-radio>
            <u-radio name="嘉里物流">嘉里物流</u-radio>
          </view>
        </u-radio-group>
      </u-cell-item>
    </u-cell-group>

    <view class="fixed-btn"><u-button @click="$u.route({ type: 'back' })" type="warning">返回列表</u-button></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '积分物料详情',

      OrderId: '',

      info: {
        OrderDetailList: []
      }
    };
  },

  onLoad(options) {
    if (options.OrderId) {
      this.OrderId = options.OrderId;
    }

    this.getData();
  },

  methods: {
    getData() {
      this.$u.api
        .getOrderDetail({
          OrderId: this.OrderId
        })
        .then(res => {
          console.log(res);
          const { ResultCode } = res;
          if (ResultCode == 1) {
            this.info = res;
          }
        });
    }
  }
};
</script>

<style>
page {
  background-color: #eceaef;
}
</style>

<style lang="scss">
.order-detail-list {
  background-color: #ffffff;
}

.detail-item {
  margin: 20rpx;
  padding: 20rpx;
}

.detail-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 12rpx;
}

.address {
  display: flex;
  flex-direction: row;
  align-items: center;

  .right {
    margin-left: 10rpx;
    display: flex;
    flex-direction: column;
  }
}

.fixed-btn {
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  padding-bottom: 60rpx;
  padding: 20rpx;
}
</style>
